<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
   <h:head>
        <title>Modify Personal Detail</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </h:head>
    <h:body>
        
        <p:layout style="min-width:1000px;min-height:1000px;">
            <p:layoutUnit position="west" resizable="true" size="220" minSize="80" maxSize="300">
                    <h:form id="button">
                        <br></br>
                        <p:commandButton id="viewPersonal" value="Personal Page" action="#{searchUserBean.uploadPersonalPage()}" ajax="true" style="width:200px;height:50px;margin-left: 5px;margin-right: 5px">  
                        </p:commandButton>
                        <br></br><br></br>
                        <p:commandButton id="newEvent" value="New Event" action="new-event" ajax="true" style="width:200px;height:50px;margin-left: 5px;margin-right: 5px">
                        </p:commandButton>
                        <br></br><br></br>
                        <p:commandButton id="searchUser" value="Browse User" action="#{searchBean.browseUsers()}" ajax="true" style="width:200px;height:50px;margin-left: 5px;margin-right: 5px">
                        </p:commandButton>
                        <br></br><br></br>
                        <p:commandButton id="searchEvent" value="Search Event" action="search-event-page" ajax="true" style="width:200px;height:50px;margin-left: 5px;margin-right: 5px">  
                        </p:commandButton>
                        <br></br><br></br>
                        <p:commandButton id="logout" value="Logout" action="#{loginBean.logout()}" style="width:200px;height:50px;margin-left: 5px;margin-right: 5px">
                        </p:commandButton>
                        <br></br><br></br>
                        <p:commandButton id="mainPage" value="Main Page" action="main-page?faces-redirect=true" style="width:200px;height:50px;margin-left: 5px;margin-right: 5px">
                        </p:commandButton>
                        </h:form>
                </p:layoutUnit>
            
            
            <p:layoutUnit position="center" resizable="true" size="700" minSize="100" maxSize="600">
                <h:form id="modify_personal">
                    <p:growl id="growl" autoUpdate="true" showSummary="false" redisplay="false" showDetail="true" sticky="true" />
                    <p:panel id='personalPanel' header='Modify Personal Informations' style="border: none">
                        <h:panelGrid columns="2" id='ModifyPersonalForm' style="border-color: #ffffff;width: 800px;width:100%" cellpadding="4" columnClasses="label,value">
                            <h:outputLabel style="font-weight: bold;" for="nameP">Name and Surname:
                            </h:outputLabel>
                            <p:inputText id="nameP" value="#{searchUserBean.selectedUser.name}" required="true" >
                                <p:watermark for="nameP" value="#{searchUserBean.selectedUser.name}" />
                            </p:inputText>
                            <h:outputLabel style="font-weight: bold;" for="emailP">E-mail:
                            </h:outputLabel>
                            <p:inputText id="emailP" required="true" validatorMessage="Invalid email format" value="#{searchUserBean.selectedUser.email}">
                                <f:validateRegex pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$" />
                                <p:watermark for="emailP" value="#{searchUserBean.selectedUser.email}"/>
                            </p:inputText>
                            <h:outputLabel style="font-weight: bold;" for="cityP">City:</h:outputLabel>
                            <p:inputText id="cityP" value="#{searchUserBean.selectedUser.city}" required="true" >
                                <p:watermark for="cityP" value="#{searchUserBean.selectedUser.city}" />
                            </p:inputText>
                            <h:outputLabel style="font-weight: bold;" for="phoneP">Phone Number:</h:outputLabel>
                            <p:inputMask id="phoneP" value="#{searchUserBean.selectedUser.phonenumber}" mask="9999999999" />
                                <p:watermark for="phoneP" value="#{searchUserBean.selectedUser.phonenumber}" />
                            <f:facet name="footer">
                                <p:commandButton id="updateUser" value="UpdateUser" action="#{userBean.modifyUser()}" style="width:200px;height:50px;margin-left: 5px;margin-right: 5px">
                                    <f:setPropertyActionListener value="#{searchUserBean.selectedUser}" target="#{userBean.user}" />  
                                </p:commandButton>

                            </f:facet>
                        </h:panelGrid>
                    </p:panel>
                </h:form>
            </p:layoutUnit>
        </p:layout>
    </h:body>
</html>
